import { defineThemes } from 'vue-theme-switcher'

type ThemeName = 'default' | 'tech' | 'medical' | 'dark'

const getSystemPreference = (): ThemeName => {
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default'
}

const getSavedTheme = (): ThemeName | null => {
  const theme = localStorage.getItem('theme')
  return theme as ThemeName | null
}

export const { useTheme, ThemeSwitcher } = defineThemes({
  initialTheme: getSavedTheme() || getSystemPreference(),
  onThemeChange: (theme: ThemeName) => {
    localStorage.setItem('theme', theme)
    document.documentElement.className = theme
  },
  default: {
    colors: {
      primary: '#409eff',
      primaryBg: '#007080',
      active: '#008899',
      text: '#333',
      bg: '#f5f7fa',
    },
  },
  tech: {
    colors: {
      primary: '#00a0e9',
      primaryBg: '#00607d',
      active: '#0088cc',
      text: '#333',
      bg: '#f0f8ff',
    },
  },
  medical: {
    colors: {
      primary: '#5cb85c',
      primaryBg: '#3d8b3d',
      active: '#4cae4c',
      text: '#333',
      bg: '#f5fff5',
    },
  },
  dark: {
    colors: {
      primary: '#646cff',
      primaryBg: '#1a1a1a',
      active: '#535bf2',
      text: '#ffffff',
      bg: '#242424',
    },
  },
})
